<!--
 API Documentation HTML Template  - 1.0.1
 Copyright © 2016 Florian Nicolas
 Licensed under the MIT license.
 https://github.com/ticlekiwi/API-Documentation-HTML-Template
 !-->
<!DOCTYPE html>
<html class="no-js">

<head>
    <meta charset="utf-8">
    <title>MixIO入门指南</title>
    <link rel="shortcut icon" href="../img/shortcut.png"/>
    <meta name="description" content="">
    <meta name="author" content="ticlekiwi">

    <meta http-equiv="cleartype" content="on">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="css/hightlightjs-dark.css">
    <link rel="stylesheet" href="../css/nunito.css">
    <link rel="stylesheet" href="../css/muuri.css">
    <script src="../js/jquery.min.js"></script>
    <script src="../js/highlight.min.js"></script>
    <link rel="stylesheet" href="css/style.css" media="all">
    <link rel="stylesheet" href="../css/farbtastic.css">
    <link href="../css/font-awesome.min.css" rel="stylesheet">
    <link href="../css/nunito.css" rel="stylesheet">
    <link href="../css/sb-admin-2.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/muuri.css">
    <link rel="stylesheet" href="../css/widgets.css">
    <script>
        hljs.initHighlightingOnLoad();
    </script>
</head>

<body class="one-content-column-version">
<div class="left-menu">
    <div class="content-logo" style="display: flex;flex-direction: row;align-items: center;">
        <img src="../img/logo.png" style="height:40px;width:38px" />
        <span style="font-weight:bold;color:white;margin-left:15px;font-size: 23px;">MixIO | 组件</span>
    </div>
    <div class="content-menu">
        <ul>
            <li class="scroll-to-link active" data-target="switch">
                <a>开关</a>
            </li>
            <li class="scroll-to-link" data-target="button">
                <a>按键</a>
            </li>
            <li class="scroll-to-link" data-target="slider">
                <a>滑杆</a>
            </li>
            <li class="scroll-to-link" data-target="joystick">
                <a>摇杆手柄</a>
            </li>
            <li class="scroll-to-link" data-target="rgb">
                <a>RGB色盘</a>
            </li>
            <li class="scroll-to-link" data-target="bulb">
                <a>指示灯</a>
            </li>
            <li class="scroll-to-link" data-target="timer">
                <a>定时触发器</a>
            </li>
            <li class="scroll-to-link" data-target="trigger">
                <a>条件触发器</a>
            </li>
            <li class="scroll-to-link" data-target="ble">
                <a>蓝牙转发器</a>
            </li>
            <li class="scroll-to-link" data-target="chart">
                <a>折线图表</a>
            </li>
            <li class="scroll-to-link" data-target="bar">
                <a>投票器</a>
            </li>
            <li class="scroll-to-link" data-target="table">
                <a>数据表格</a>
            </li>
            <li class="scroll-to-link" data-target="map">
                <a>数据地图</a> 
            </li>
            <li class="scroll-to-link" data-target="dashboard">
                <a>仪表盘</a>
            </li>
            <li class="scroll-to-link" data-target="weather">
                <a>实时气象仪</a>
            </li>
            <li class="scroll-to-link" data-target="input">
                <a>文本输入</a>
            </li>
            <li class="scroll-to-link" data-target="output_text">
                <a>文本显示屏</a>
            </li>
            <li class="scroll-to-link" data-target="pixel">
                <a>点阵屏</a>
            </li>
            <li class="scroll-to-link" data-target="label">
                <a>标签</a>、
            </li>
            <li class="scroll-to-link" data-target="image">
                <a>图片</a>
            </li>
            <li class="scroll-to-link" data-target="video">
                <a>视频</a>
            </li> 
        </ul>
    </div>
</div>


<div class="content-page">
    <div class="content">
        <div class="overflow-hidden content-section" id="content-switch">
            <h1 id="switch">开关</h1>
            <h3>组件总览</h3>
            <p>
                以“关/开”两种状态响应用户输入，向消息主题发送0/1信号；同时接收消息主题的0/1信号，实现对应的关/开状态呈现。
            </p>
            <h3>可配置项</h3>
            <p>
                <span style="color:#4e73df;">组件名称</span> - 组件的名称，用于在页面上显示，并作为逻辑视图控制的唯一id。
            </p>
            <p>
                <span style="color:#4e73df;">消息主题</span> - 组件的消息主题。
            </p>
            <p>
                <span style="color:#4e73df;">反馈模式</span> - 组件的反馈模式，可在此处将“开关”组件转换为“按键”组件。
            </p>
        </div>
        <div class="overflow-hidden content-section" id="content-button">
            <h1 id="button">按键</h1>
            <h3>组件总览</h3>
            <p>
                以“按下/松开”模式响应用户输入，向消息主题发送0/1信号（按下=1，松开=0）。
            </p>
            <h3>可配置项</h3>
            <p>
                <span style="color:#4e73df;">组件名称</span> - 组件的名称，用于在页面上显示，并作为逻辑视图控制的唯一id。
            </p>
            <p>
                <span style="color:#4e73df;">消息主题</span> - 组件的消息主题。
            </p>
            <p>
                <span style="color:#4e73df;">反馈模式</span> - 组件的反馈模式，可在此处将“按键”组件转换为“开关”组件。
            </p>
        </div>
        <div class="overflow-hidden content-section" id="content-slider">
            <h1 id="slider">滑杆</h1>
            <h3>组件总览</h3>
            <p>
                以“滑动”模式响应用户输入，向消息主题发送数字；同时接收消息主题的数字，实现对应的滑动位置呈现。
            </p>
            <h3>可配置项</h3>
            <p>
                <span style="color:#4e73df;">组件名称</span> - 组件的名称，用于在页面上显示，并作为逻辑视图控制的唯一id。
            </p>
            <p>
                <span style="color:#4e73df;">消息主题</span> - 组件的消息主题。
            </p>
            <p>
                <span style="color:#4e73df;">滑动范围</span> - 滑杆的最小值、最大值和步长值。
            </p>
        </div>
        <div class="overflow-hidden content-section" id="content-joystick">
            <h1 id="joystick">摇杆手柄</h1>
            <h3>组件总览</h3>
            <p>
                以“摇杆”模式响应用户输入，向消息主题发送"X,Y"格式的字符串, 其中X和Y分别为摇杆的X轴和Y轴的值（范围均为-100~100），每500ms采样一次。
            </p>
            <h3>可配置项</h3>
            <p>
                <span style="color:#4e73df;">组件名称</span> - 组件的名称，用于在页面上显示，并作为逻辑视图控制的唯一id。
            </p>
            <p>
                <span style="color:#4e73df;">消息主题</span> - 组件的消息主题。
            </p>
        </div>
        <div class="overflow-hidden content-section" id="content-rgb">
            <h1 id="rgb">RGB色盘</h1>
            <h3>组件总览</h3>
            <p>
                以“拖动”或“点击”模式响应用户输入，向三个消息主题分别发送R、G、B通道的颜色值（范围均为0~255）。
            </p>
            <h3>可配置项</h3>
            <p>
                <span style="color:#4e73df;">组件名称</span> - 组件的名称，用于在页面上显示，并作为逻辑视图控制的唯一id。
            </p>
            <p>
                <span style="color:#4e73df;">消息主题（R）</span> - 组件的消息主题（R通道）。
            </p>
            <p>
                <span style="color:#4e73df;">消息主题（G）</span> - 组件的消息主题（G通道）。
            </p>
            <p>
                <span style="color:#4e73df;">消息主题（B）</span> - 组件的消息主题（B通道）。
            </p>
        </div>
        <div class="overflow-hidden content-section" id="content-bulb">
            <h1 id="bulb">指示灯</h1>
            <h3>组件总览</h3>
            <p>
                接收消息主题的0/1/2/3信号，实现对应的状态呈现（0=关闭，1=<b style="color: #1cc88a;">绿灯</b>，2=<b style="color:#f6c23e">黄灯</b>，3=<b style="color:#e74a3b">红灯</b>）。
            </p>
            <p>
                也接收中/英文颜色字符串，包括：
                "红", "橙", "黄", "绿", "青", "蓝", "紫", "白", "黑", "灰", "棕",
                "red", "orange", "yellow", "green", "cyan", "blue", "purple", "white", "black", "grey", "brown"
            </p>
            <p>
                也支持RGB通道格式和16进制颜色，例如：
                "255,0,0", "#ff0000"
            </p>
            <h3>可配置项</h3>
            <p>
                <span style="color:#4e73df;">组件名称</span> - 组件的名称，用于在页面上显示，并作为逻辑视图控制的唯一id。
            </p>
            <p>
                <span style="color:#4e73df;">消息主题</span> - 组件的消息主题。
            </p>
        </div>
        <div class="overflow-hidden content-section" id="content-timer">
            <h1 id="timer">定时触发器</h1>
            <h3>组件总览</h3>
            <p>
                以设定的“触发间隔”为周期，向“触发消息主题”发送“触发消息内容”，直至触发次数达到“次数上限”（0=无限制）。
            </p>
            <h3>可配置项</h3>
            <p>
                <span style="color:#4e73df;">组件名称</span> - 组件的名称，用于在页面上显示，并作为逻辑视图控制的唯一id。
            </p>
            <p>
                <span style="color:#4e73df;">触发消息主题</span> - 组件下发触发消息的消息主题。
            </p>
            <p>
                <span style="color:#4e73df;">触发消息内容</span> - 组件下发触发消息的消息内容。
            </p>
            <p>
                <span style="color:#4e73df;">触发间隔</span> - 组件下发触发消息的间隔时间（单位：毫秒）。
            </p>
            <p>
                <span style="color:#4e73df;">次数上限</span> - 组件下发触发消息的次数上限（0=无限制）。
            </p>
        </div>
        <div class="overflow-hidden content-section" id="content-trigger">
            <h1 id="trigger">条件触发器</h1>
            <h3>组件总览</h3>
            <p>
                接收条件主题的消息，当来自条件主题的消息满足触发条件的关系组合时，在动作主题发送动作消息。
            </p>
            <h3>可配置项</h3>
            <p>
                <span style="color:#4e73df;">组件名称</span> - 组件的名称，用于在页面上显示，并作为逻辑视图控制的唯一id。
            </p>
            <p>
                <span style="color:#4e73df;">条件主题</span> - 组件接收消息的主题。
            </p>
            <p>
                <span style="color:#4e73df;">触发条件1</span> - 组件触发动作的条件1。
            </p>
            <p>
                <span style="color:#4e73df;">触发条件2</span> - 组件触发动作的条件2。
            </p>
            <p>
                <span style="color:#4e73df;">条件关系</span> - 组件触发动作需要满足的条件关系（“AND”关系下需要同时满足两项条件方能执行动作，“OR”关系下需要满足至少一项条件方能执行动作，“XOR”关系下需要满足且仅满足一项条件方能执行动作）。
            </p>
            <p>
                <span style="color:#4e73df;">动作主题</span> - 组件下发动作消息的消息主题。
            </p>
            <p>
                <span style="color:#4e73df;">动作消息内容</span> - 组件下发动作消息的消息内容。
            </p>
        </div>
        <div class="overflow-hidden content-section" id="content-ble">
            <h1 id="ble">蓝牙转发器</h1>
            <h3>组件总览</h3>
            <p>
                连接蓝牙设备，将蓝牙设备的读取与写入对接到消息主题，实现蓝牙设备与MixIO的通信。<br>
            </p>
            <p>
                <b>以下是蓝牙转发器的状态指示灯含义：</b>
            </p>
            <p>
                <span style="color:#4e73df;">深蓝色闪烁标志</span> - 正在尝试连接蓝牙设备。
            </p>
            <p>
                <span style="color:#4e73df;">深蓝色常亮标志</span> - 已连接蓝牙设备。
            </p>
            <p>
                <span style="color: #1cc88a">绿色闪烁标志</span> - 正在从设备接收数据。
            </p>
            <p>
                <span style="color: #36B9CC;">浅蓝色闪烁标志</span> - 正在向设备发送数据。
            </p>
            <p>
                <span style="color: #e74a3b">红色常亮标志</span> - 蓝牙设备已断开。
            </p>
            <p>
                <span style="color: #858796">灰色标志</span> - 未选择蓝牙设备。
            </p>
            <h3>可配置项</h3>
            <p>
                <span style="color:#4e73df;">组件名称</span> - 组件的名称，用于在页面上显示，并作为逻辑视图控制的唯一id。
            </p>
            <p>
                <span style="color:#4e73df;">读取消息主题</span> - 组件读取蓝牙设备消息，进行转发的消息主题。
            </p>
            <p>
                <span style="color:#4e73df;">蓝牙设备</span> - 组件连接的蓝牙设备。
            </p>
        </div>
        <div class="overflow-hidden content-section" id="content-chart">
            <h1 id="chart">折线图表</h1>
            <h3>组件总览</h3>
            <p>
                接收单一数值数据或JSON格式的多个数值数据，显示为折线统计图。
            </p>
            <h3>可配置项</h3>
            <p>
                <span style="color:#4e73df;">组件名称</span> - 组件的名称，用于在页面上显示，并作为逻辑视图控制的唯一id。
            </p>
            <p>
                <span style="color:#4e73df;">消息主题</span> - 组件的消息主题。
            </p>
        </div>
        <div class="overflow-hidden content-section" id="content-bar">
            <h1 id="bar">投票器</h1>
            <h3>组件总览</h3>
            <p>
                接收文本数据，增加对应选项的计数。
            </p>
            <h3>可配置项</h3>
            <p>
                <span style="color:#4e73df;">组件名称</span> - 组件的名称，用于在页面上显示，并作为逻辑视图控制的唯一id。
            </p>
            <p>
                <span style="color:#4e73df;">消息主题</span> - 组件的消息主题。
            </p>
            <p>
                <span style="color:#4e73df;">选项列表</span> - 用英文逗号分隔的选项列表。
            </p>
            <p>
                <span style="color:#4e73df;">接收模式</span> - 单选（严格匹配，每次仅接收一个选项）或多选（模糊匹配，每次可接收多个选项）。
            </p>
        </div>
        <div class="overflow-hidden content-section" id="content-table">
            <h1 id="table">数据表格</h1>
            <h3>组件总览</h3>
            <p>
                接收单一数值数据或英文逗号分隔的多个数值数据，呈现为一个数据行。<br>
                “时间”列自动生成，显示数据接收的时间。
            </p>
            <h3>可配置项</h3>
            <p>
                <span style="color:#4e73df;">组件名称</span> - 组件的名称，用于在页面上显示，并作为逻辑视图控制的唯一id。
            </p>
            <p>
                <span style="color:#4e73df;">消息主题</span> - 组件的消息主题。
            </p>
            <p>
                <span style="color:#4e73df;">列名</span> - 用英文逗号分隔的表格列名列表。
            </p>
        </div>
        <div class="overflow-hidden content-section" id="content-map">
            <h1 id="map">数据地图</h1>
            <h3>组件总览</h3>
            <p>
                接收JSON格式的地图标记数据，并进行显示。<br>
                消息示例：
                {
                    "clientid": "#bus1",
                    "long": "116.404",
                    "lat": "39.915",
                    "message":[
                        {"label":"位置","value":"北京"},
                        {"label":"天气","value":"晴"}
                    ]
                }<br>
                其中，clientid为地图标记的唯一id，long和lat为地图标记的经纬度，message为地图标记的信息，须由包含label和value两个键的元素列表构成。<br>
                同一clientid的新消息将覆盖旧消息，更新显示。
            </p>
            <h3>可配置项</h3>
            <p>
                <span style="color:#4e73df;">组件名称</span> - 组件的名称，用于在页面上显示，并作为逻辑视图控制的唯一id。
            </p>
            <p>
                <span style="color:#4e73df;">消息主题</span> - 组件的消息主题。
            </p>
        </div>
        <div class="overflow-hidden content-section" id="content-pixel">
            <h1 id="pixel">点阵屏</h1>
            <h3>组件总览</h3>
            <p>
                接收像素数据，实现点阵图像显示<br>
            </p>
            <p>
                <b>以下是数据格式：</b>
            </p>
            <p>
                行索引（0起始）-列索引（0起始）-颜色（0=灰，1=深蓝，任意个数的不同像素间用英文逗号连接）<br>
                例如：0-1-1,1-0-0,1-1-1
            </p>
            <h3>可配置项</h3>
            <p>
                <span style="color:#4e73df;">组件名称</span> - 组件的名称，用于在页面上显示，并作为逻辑视图控制的唯一id。
            </p>
            <p>
                <span style="color:#4e73df;">消息主题</span> - 组件接收消息的主题。
            </p>
            <p>
                <span style="color:#4e73df;">水平像素</span> - 点阵屏水平像素的个数。
            </p>
            <p>
                <span style="color:#4e73df;">垂直像素</span> - 点阵屏垂直像素的个数。
            </p>
        </div>
    </div>
</div>

<script src="js/script.js"></script>
</body>

</html>